<template>
    <CommonCard title="累计订单额" :value="reportData.orderToday">
        <template #default>
            <v-chart :option="option"></v-chart>
        </template>
        <template #footer>
            <span>昨日销售额</span>
            <span class="css-1">￥ {{ reportData.orderLastDay }}</span>
        </template>
    </CommonCard>
</template>

<script setup>
import { ref,watch } from 'vue'
import CommonCard from './CommonCard.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})
const option=ref({})
const renderChart=(data)=>{
  option.value={
    xAxis: {
    type: 'category',
    boundaryGap: false,
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
  series: {
    type: 'line',
    data: data,
    areaStyle: {
      color: 'purple',
    },
    itemStyle: {
      opacity: 0,
    },
    lineStyle: {
      opacity: 0,
    },
    smooth: true,
   },
  }
}
watch(props,()=>{
  renderChart(props.reportData.orderTrend)
})
</script>

<style scoped>
</style>